import React from 'react'
import PropTypes from 'prop-types'
import {routerRedux} from 'dva/router'
import {connect} from 'dva'
import {Button, Col, Icon, Popconfirm, Row} from 'antd'
import {Page} from 'components'
import queryString from 'query-string'
import List from './components/List'
import Filter from './components/Filter'
import {api} from 'config'
import Modal from './components/Modal'
import {ChartCard} from 'components/Charts'

const AllOrder = ({
  location, dispatch, allOrder, loading,
}) => {
  const { query, pathname } = location
  const {
    list, empList, departments, productType, orderType, prePayType, pagination, expandForm, currentItem, modalVisible, modalType, selectedRowKeys,
  } = allOrder

  const handleRefresh = (newQuery) => {
    dispatch(routerRedux.push({
      pathname,
      search: queryString.stringify({
        ...query,
        ...newQuery,
      }),
    }))
  }

  const ColProps = {
    xs: 24,
    sm: 12,
    style: {
      marginBottom: 16,
    },
  }

  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    width: 1600,
    maskClosable: false,
    confirmLoading: loading.effects[`allOrder/${modalType}`],
    title: '新增微信运营号',
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({
        type: `allOrder/${modalType}`,
        payload: data,
      })
        .then(() => {
          handleRefresh()
        })
    },
    onCancel() {
      dispatch({
        type: 'allOrder/hideModal',
      })
    },
  }

  const listProps = {
    rowKey: 'id',
    dataSource: list,
    loading: loading.effects['allOrder/query'],
    pagination,
    location,
    dispatch,
    onChange(page) {
      handleRefresh({
        current: page.current,
        size: page.pageSize,
      })
    },
    openTab(record) {
      const tab = {
        name: '运营号-'.concat(record.allOrderWxId),
        route: '/allOrder/'.concat(record.id),
      }
      dispatch({
        type: 'app/addTab',
        payload: {
          menu: tab,
        },
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys) => {
        dispatch({
          type: 'allOrder/updateState',
          payload: {
            selectedRowKeys: keys,
          },
        })
      },
    },
  }

  const filterProps = {
    filter: {
      ...query,
    },
    empList,
    departments,
    productType,
    orderType,
    prePayType,
    expandForm,
    toggleForm() {
      dispatch({ type: 'allOrder/toggleForm' })
    },
    onFilterChange(value) {
      handleRefresh({
        ...value,
        current: 1,
      })
    },
    handleSearch(key) {
      if (key) {
        dispatch({
          type: 'allOrder/searchEmp',
          payload: {
            key,
          },
        })
      }
    },
  }

  const onAdd = () => {
    dispatch({
      type: 'allOrder/showModal',
      payload: {
        modalType: 'create',
      },
    })
  }

  const handleDeleteItems = () => {
    dispatch({
      type: 'allOrder/multiDelete',
      payload: {
        ids: selectedRowKeys,
      },
    })
      .then(() => {
        handleRefresh({
          current: (list.length === selectedRowKeys.length && pagination.current > 1) ? pagination.current - 1 : pagination.current,
        })
      })
  }

  return (
    <div>
      <Row gutter={24}>
        <ChartCard style={{ marginBottom: 12 }}>
          <Filter {...filterProps} />
        </ChartCard>
      </Row>
      <Row gutter={24}>
        <Page inner>
          {/*<Row gutter={24}>*/}
            {/*<Col {...ColProps} xl={{ span: 24 }} md={{ span: 24 }} sm={{ span: 24 }}>*/}
              {/*<div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', float: 'right' }}>*/}
                {/*<div>*/}
                  {/*<Button className="margin-right" type="primary" onClick={onAdd}>导出查询全部</Button>*/}
                  {/*<a href="javascript:alert('下载模板');" target="_blank">*/}
                    {/*<Button className="margin-right"><Icon type="cloud-download-o" />导出今日全部</Button>*/}
                  {/*</a>*/}
                  {/*<a href="javascript:alert('运营号导出');" target="_blank">*/}
                    {/*<Button className="margin-right"><Icon type="cloud-download-o" />导出</Button>*/}
                  {/*</a>*/}
                {/*</div>*/}
              {/*</div>*/}
            {/*</Col>*/}
          {/*</Row>*/}
          <List {...listProps} />
          {modalVisible && <Modal {...modalProps} />}
        </Page>
      </Row>
    </div>
  )
}

AllOrder.propTypes = {
  allOrder: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ allOrder, loading }) => ({ allOrder, loading }))(AllOrder)
